<template>
  <d2-container :class="{ 'page-compact': crud.pageOptions.compact }">
    <d2-crud-x
      ref="d2Crud"
      v-bind="_crudProps"
      v-on="_crudListeners"
    >
      <div slot="header">
        <crud-search
          ref="search"
          :options="crud.searchOptions"
          @submit="handleSearch"
        />
        <el-button-group>
          <el-button
            size="small"
            type="primary"
            @click="addRow"
            v-permission="'Create'"
            ><i class="el-icon-plus" /> 新增</el-button
          >
          <el-button
            size="small"
            v-permission="'BatchDelete'"
            :disabled="selectionLength === 0"
            type="danger"
            @click="batchDelete"
            ><i class="el-icon-delete" /> 批量删除</el-button
          >
        </el-button-group>
        <crud-toolbar
          :search.sync="crud.searchOptions.show"
          :compact.sync="crud.pageOptions.compact"
          :columns="crud.columns"
          @refresh="doRefresh()"
          @columns-filter-changed="handleColumnsFilterChanged"
        />
      </div>
    </d2-crud-x>
  </d2-container>
</template>

<script>
import * as api from './api'
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
export default {
  name: 'power',
  mixins: [d2CrudPlus.crud],
  components: {
  },
  data () {
    return {
      rolePermissionShow: false,
      roleObj: undefined,
      is_init: false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.is_init = true
    })
  },
  computed: {
    selectionLength () {
      if (this.is_init) {
        return this.getD2CrudTable().selection.length
      } else {
        return 0
      }
    },
    selectionIds () {
      if (this.is_init) {
        return this.getD2CrudTable().selection.map(item => item.id)
      } else {
        return []
      }
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) {
      return api.GetList(query)
    },
    addRequest (row) {
      return api.createObj(row)
    },
    updateRequest (row) {
      return api.UpdateObj(row)
    },
    delRequest (row) {
      return api.DelObj(row.id)
    },
    batchDelete () {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.BatchDeleteObj(this.selectionIds).then(res => {
          this.doRefresh()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      })
    }
  }
}
</script>

<style lang="scss">
.yxtInput {
  .el-form-item__label {
    color: #49a1ff;
  }
}
</style>
